<template>
	<scroll-view class="Layout" scroll-x>
		<view class="CircleBox" v-for="(item,index) in 20" :key="index" @click="changActive(index)">
			<view :class="['Circle',activeBox==index?'active':'']">
			
			</view>
	
			<view class="Text">
				{{index}}
			</view>
		</view>

	</scroll-view>

</template>

<script setup>
import { ref, watch } from 'vue';
const activeBox=ref(0)
const changActive= (index)=>{
	activeBox.value=index
}
watch(activeBox,(newValue, OldValue)=>{
	console.log(newValue,OldValue);
})

</script>

<style lang="scss" scoped>


	

</style>